import './NuresList.css'
import { UserOutlined } from '@ant-design/icons';
// import type { PaginationProps } from 'antd';
import { Input, Button, Pagination, } from 'antd';
import axios from 'axios';
import { useEffect, useRef, useState } from 'react';

function ComprehensiveList() {
    const [NurseList, setNurseList] = useState([]);
    const [page, setPage] = useState(1);
    const [pageSize] = useState(10);
    const pageNum = useRef(0)
    // 护士名称
    const [name, setName] = useState('');
    // 护士科室
    const [department, setDepartment] = useState('');
    const [total, setTotal] = useState(0)
    useEffect(() => {
        axios.get(`http://8.148.7.123:8000/doctor/list_nurse?page=${page}&size=${pageSize}`).then(res => {
            setNurseList(res.data.data)
            setTotal(res.data.total)
        })
    }, [])
    const onChange = (pageNumber) => {
        setPage(pageNumber);
        setTimeout(() => {
            pageNum.current = pageNumber;
            
        })

    };
    // 查询
    const handleSearch = () => {
        let url = `http://8.148.7.123:8000/doctor/list_nurse?page=${page}&size=${pageSize}`;
        if (name) url += `&name=${name.trim()}`; // 去除前后空格
        if (department) url += `&department=${department.trim()}`;
        axios.get(url)
        .then(res => {
             if (res.data.data.length === 0) {
                 alert('没有查询到相关护士信息');
             } else {
                 setNurseList(res.data.data);
             }
             setName('');
             setDepartment('');
         })
    };
    return (
        <div className="ComprehensiveListBox">
            <div className='ComprehensiveListHeader'>
                <div className='ComprehensiveListTitle'>护士名称</div>
                <Input className='ComprehensiveListSearchInput' value={name} onChange={(e) => setName(e.target.value)} placeholder="请输入查询名称" prefix={<UserOutlined />} />
                <div className='ComprehensiveListTitle'>护士科室</div>
                <Input className='ComprehensiveListSearchInput' value={department} onChange={(e) => setDepartment(e.target.value)} placeholder="请输入科室" prefix={<UserOutlined />} />
                <Button type="primary" onClick={handleSearch}>查询</Button>
            </div>
            <div className='ComprehensiveListContent'>
                <div className='ComprehensiveListContentHeader'>
                    <div className='ComprehensiveListContentHeaderName'>护士姓名</div>
                    <div className='ComprehensiveListContentHeaderBelong'>所属科室</div>
                    <div className='ComprehensiveListContentHeaderAvatar'>护士头像</div>
                    <div className='ComprehensiveListContentHeaderPhone'>联系方式</div>
                    <div className='ComprehensiveListContentHeaderGender'>性别</div>
                </div>
                {
                    NurseList.map(item => (
                        <div className='ComprehensiveListContentItem' key={item.id}>
                            <div className='ComprehensiveListContentItemName'>{item.name}</div>
                            <div className='ComprehensiveListContentItemBelong'>{item.department}</div>
                            <div className='ComprehensiveListContentItemAvatar'>
                                <img className='ComprehensiveListContentItemAvatarImg' src={item.head} alt='图片加载失败' />
                            </div>
                            <div className='ComprehensiveListContentItemPhone'>{item.phone}</div>
                            <div className='ComprehensiveListContentItemGender'>{item.sex}</div>
                        </div>
                    ))
                }
                <div className='ComprehensiveListFooter'>
                    <div className='ComprehensiveListFooterNum'>共 {total} 条数据</div>
                    <Pagination showQuickJumper defaultCurrent={pageNum.current} total={total} defaultPageSize={pageSize} onChange={onChange} />
                </div>
            </div>
        </div>
    );
}

export default ComprehensiveList;